<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width">
    <title>demo</title>
</head>
<style type="text/css">
    .box{
        width: 800px;
        margin: 0 auto;
    }
    li {
        display: inline-block;

    }
    img{
        border-radius: 10px;
        width: 180px;
    }
    li h3:nth-of-type(1) {
        color: #00BFFF;
        font-size: 20px;
    }
    li p:nth-of-type(1){
        font-size:16px;
    }
    li p:nth-of-type(2){
        color: #008000;
        font-size: 10;
    }
    li:hover{
        box-shadow: 0 5px 5px 10px rgba(0, 0, 0, 0.2), 0 4px 10px 10px rgba(0,0,0,0.4);
        transition: all 3s;
    }
    li{
        box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.1), 0 0px 0px 0px rgba(0,0,0,0.2);
        transition: all 3s;
    }
</style>
<body>
<div class="box">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="home.html">作业三</a>
    <h1>热播</h1>
    <ul>
        <li>
            <img src="img/img1.png" >
            <h3>神武赵子龙</h3>
            <p>怒，林更新网红抱女神</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img2.png" >
            <h3>旋风十一人</h3>
            <p>胡歌变教练在撩前女友</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="img/img3.png" alt=""/>
            <h3>太阳的后裔</h3>
            <p>宋慧乔吃嫩草</p>
            <p>点击次数：242445次</p>

        </li>
        <li>
            <img src="img/img4.png" alt=""/>
            <h3>山海经之赤影传说</h3>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>

        </li>
    </ul>
</div>

</body>
</html>
